<template>
  <div ref="looks" id="container"></div>
</template>

<script>
// import Header from "../../layouts/Header"
import * as THREE from "three";
// import '../../utils/OrbitControls'
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { onMounted, ref } from "vue";
export default {
  setup() {
    var scene, camera, renderer;
    let looks = ref(null);
    let e =
      "https://vrlab-image2.ljcdn.com/release/auto3dhd/ac0275884d33971c8e5c849bbbde35d6/images/cube_2048/2/31a5069fd3363e2e738e778eed8f29b7/2_b.jpg?imageMogr2/quality/70";
    let c =
      "https://vrlab-image1.ljcdn.com/release/auto3dhd/ac0275884d33971c8e5c849bbbde35d6/images/cube_2048/2/31a5069fd3363e2e738e778eed8f29b7/2_u.jpg?imageMogr2/quality/70";
    let b =
      "https://vrlab-image2.ljcdn.com/release/auto3dhd/ac0275884d33971c8e5c849bbbde35d6/images/cube_2048/2/31a5069fd3363e2e738e778eed8f29b7/2_r.jpg?imageMogr2/quality/70";
    let a =
      "https://vrlab-image1.ljcdn.com/release/auto3dhd/ac0275884d33971c8e5c849bbbde35d6/images/cube_2048/2/31a5069fd3363e2e738e778eed8f29b7/2_l.jpg?imageMogr2/quality/70";
    let f =
      "https://vrlab-image1.ljcdn.com/release/auto3dhd/ac0275884d33971c8e5c849bbbde35d6/images/cube_2048/2/31a5069fd3363e2e738e778eed8f29b7/2_f.jpg?imageMogr2/quality/70";
    let d =
      "https://vrlab-image2.ljcdn.com/release/auto3dhd/ac0275884d33971c8e5c849bbbde35d6/images/cube_2048/2/31a5069fd3363e2e738e778eed8f29b7/2_d.jpg?imageMogr2/quality/70";
    function initThree() {
      //场景
      scene = new THREE.Scene();
      //镜头
      camera = new THREE.PerspectiveCamera(
        90,
        document.body.clientWidth / document.body.clientHeight,
        0.1,
        100
      );
      camera.position.set(0, 0, 0.01);
      //渲染器
      renderer = new THREE.WebGLRenderer();
      
      renderer.setSize(document.body.clientWidth, document.body.clientHeight);
      document.getElementById("container").appendChild(renderer.domElement);
      //镜头控制器
      var controls = new OrbitControls(camera, renderer.domElement);
      controls.target = new THREE.Vector3(0, 0, 0); //控制焦点
      controls.autoRotate = false; //将自动旋转关闭
      var clock = new THREE.Clock(); //用于更新轨道控制器
      var elta = clock.getDelta(); //获取时间差
      controls.update(elta); //更新时间

      looks.value.appendChild(renderer.domElement);
      var materials = [];
      //根据左右上下前后的顺序构建六个面的材质集
      var texture_left = new THREE.TextureLoader().load(a);
      materials.push(new THREE.MeshBasicMaterial({ map: texture_left }));

      var texture_right = new THREE.TextureLoader().load(b);
      materials.push(new THREE.MeshBasicMaterial({ map: texture_right }));

      var texture_top = new THREE.TextureLoader().load(c);
      materials.push(new THREE.MeshBasicMaterial({ map: texture_top }));

      var texture_bottom = new THREE.TextureLoader().load(d);
      materials.push(new THREE.MeshBasicMaterial({ map: texture_bottom }));

      var texture_front = new THREE.TextureLoader().load(e);
      materials.push(new THREE.MeshBasicMaterial({ map: texture_front }));

      var texture_back = new THREE.TextureLoader().load(f);
      materials.push(new THREE.MeshBasicMaterial({ map: texture_back }));

      var box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), materials);
      scene.add(box);
      //一会儿在这里添加3D物体
      box.geometry.scale(1, 1, -1);
      loop();
    }

    //帧同步重绘
    function loop() {
        requestAnimationFrame(loop);
        renderer.render(scene, camera);
    }

    onMounted(() => {
        initThree()
    })
    return {
      looks,
    };
  },
};
</script>

<style>
#container{
    width: 100%;
    height: 100%;
}
</style>